<!DOCTYPE html>
<meta charset="utf-8">
<title>Generic View</title>
<head>
<!--    D3.js, legend, color, scale, google api font scripts -->
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.js"></script>
    <script src="https://rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<!--CSS For this file, Gauntlet, W3.css for bootstrap plugin-->
<link rel="stylesheet" href="css/generic.css">
<link rel="stylesheet" href="css/style.css"> <!-- gauntlet css-->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<body>
<!--    Navigation panel -->
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          <!-- PROJECT TITLE -->
          <a class="navbar-brand" href="#"><span>T</span><span>R</span><span>E</span><span>N</span><span>D</span><span>S</span> In Movie Industry</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="movie_creator.html">Movie Creator</a></li>
            <li><a href="movie_viewer.html">Movie Viewer</a></li>
            <li><a href="about.html">About Project</a></li>
          </ul>

        </div>
      </div>
    </nav>
    
<!--    Carousel showing movie posters -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="img/inc.png" alt="Image" style="height: 550px">
            <div class="carousel-caption">
              <h3 style="color: skyblue; font-weight:bold"></h3>
              <p></p>
            </div>      
          </div>

          <div class="item">
            <img src="img/car_img.jpg" style="height: 550px" alt="Image">
            <div class="carousel-caption">
              <h3>Avengers Endgame</h3>
              <p>(Now in theatres)</p>
            </div>      
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
     </div><br>
    
<!--    Viz showing map and stack bar charts -->
    <div id="viz_container" style="padding-top: 10px">
        <div id="viz1">
            <div id="stackchart" style="width:57%; margin-left: 20px;">
                <h2>Rise in Movie production based on different genres <br>across time</h2>
            </div>
            <div id="barplot" style=" width:40%; height:607px;">
                <svg style=" width:100%; height:100%" class = "blinking">
                    <text x=10 y=286 fill="crimson", font-size="30px"; font-weight="bold">Click on any genre stack to see</text>
                    <text x=30 y=306 fill="darkorange", font-size="20px">its usage trend for movie making across time</text>
                </svg>
            </div>
        </div><br>
        
        <div id="viz2" style="margin-top: 100">   
            <h2 style="margin-left: 20px;">Which Country has got more Movie Buffs?</h2>
            <div id="map" style="margin-left: 20px; width:50%">
                <svg width="670" height="400"></svg>
            </div>

            <div id="wordcloud" style="width:47%">
                <svg width="670" height="400"><text x=200 y=200 font-size=25 fill="crimson", font-weight="bold"> Hover on the country to see their</text><text x=280 y=220 font-size=25 fill="darkorange" >genre preference</text></svg>
            </div>
        </div>
    </div>

<!--    Select your perspective choice   -->
    <div class="container text-center">    
      <h3>Choose your perspective</h3><br>
      <div class="row">
        <div class="inner_div1" >
            <center><a href="movie_creator.html"><img  src="img/images.png" class="img-responsive" style="width: 50%" alt="Image"></a></center>
            <h3>Movie Creator</h3>
        </div>
        <div class="inner_div2" > 
            <center><a href="movie_viewer.html"><img  src="img/popcorn.jpg" class="img-responsive" style="width: 47.5%"  alt="Image"></a></center>
            <h3>Movie Viewer</h3>    
        </div>
      </div>
    </div><br>

<!--    Footer  -->
    <footer>
        <p style="color: white;"><b style="color: white;">Developed By:</b> Himanshu Sharma (ID : 29857082)</p>
    </footer>
    
</body>

<!--This file's js-->
<script src="js/generic.js"></script>  

